import React, { useState, useEffect, useRef, useContext } from 'react';
import { useLocation } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { Form, Input, Select, DatePicker, Button, Table, Space, Typography, Card, Spin, message, Row, Col, Modal, AutoComplete, Tooltip } from 'antd';
import { SearchOutlined, ReloadOutlined, DownloadOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { dataAPI } from '../utils/api';
import { usePermissions, PERMISSIONS } from '../utils/permissions';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import isBetween from 'dayjs/plugin/isBetween';
import * as XLSX from 'xlsx';
import './DataQuery.css';
dayjs.extend(isBetween);
dayjs.locale('zh-cn');

const { Title } = Typography;
const { Option } = Select;
const { RangePicker } = DatePicker;

const DataQuery = () => {
  const [sorter, setSorter] = useState({});
  const location = useLocation();
  const { user } = useAuth();
  const { hasPermission } = usePermissions(user);
  const [countries, setCountries] = useState({ import: [], export: [] });
  const [form] = Form.useForm();
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [currentRecord, setCurrentRecord] = useState(null);
  const [editForm] = Form.useForm();
  const [dataSource, setDataSource] = useState([]);
  const [loading, setLoading] = useState(false);

  // 在组件顶部添加新的状态来管理 AutoComplete 的值
  const [importerValue, setImporterValue] = useState('');
  const [exporterValue, setExporterValue] = useState('');

  // 模糊查询相关状态 - 默认开启模糊搜索
  const [fuzzySearch, setFuzzySearch] = useState({
    importer: false,
    exporter: false
  });
  const [suggestions, setSuggestions] = useState({
    importers: [],
    exporters: []
  });

  // HSCode相关状态
  const [hsCodeOptions, setHsCodeOptions] = useState([]);
  
  // 添加海关编码描述映射状态
  const [hsCodeDescriptions, setHsCodeDescriptions] = useState({});

  // 添加表格容器的 ref
  const tableContainerRef = useRef(null);
  const watermarkRef = useRef(null);

  // 创建水印函数
  const createWatermark = () => {
    const container = tableContainerRef.current;
    if (!container) return;

    // 清理旧水印
    if (watermarkRef.current) {
      watermarkRef.current.remove();
      watermarkRef.current = null;
    }

    // const currentDate = dayjs().format('YYYY-MM-DD');
    const watermarkText = `星巡平台`;

    // 创建水印容器
    const watermarkDiv = document.createElement('div');
    watermarkDiv.className = 'table-watermark';
    
    // 获取容器尺寸
    const containerRect = container.getBoundingClientRect();
    const watermarkWidth = 220;
    const watermarkHeight = 120;
    const cols = Math.ceil(containerRect.width / watermarkWidth) + 1;
    const rows = Math.ceil(containerRect.height / watermarkHeight) + 1;

    // 创建重复水印文本
    for (let i = 0; i < rows; i++) {
      for (let j = 0; j < cols; j++) {
        const textSpan = document.createElement('span');
        textSpan.textContent = watermarkText;
        textSpan.className = 'watermark-text';
        textSpan.style.left = `${j * watermarkWidth}px`;
        textSpan.style.top = `${i * watermarkHeight}px`;
        watermarkDiv.appendChild(textSpan);
      }
    }

    watermarkRef.current = watermarkDiv;
    container.appendChild(watermarkDiv);
  };

  // 监听数据变化和窗口大小变化，重新创建水印
  useEffect(() => {
    if (dataSource.length > 0) {
      // 延迟创建水印，确保表格已完全渲染
      const timer = setTimeout(createWatermark, 200);
      return () => clearTimeout(timer);
    }
  }, [dataSource, user]);

  // 监听窗口大小变化
  useEffect(() => {
    const handleResize = () => {
      if (tableContainerRef.current && dataSource.length > 0) {
        setTimeout(createWatermark, 100);
      }
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
      if (watermarkRef.current) {
        watermarkRef.current.remove();
        watermarkRef.current = null;
      }
    };
  }, [dataSource]);

  // 从首页接收搜索参数并自动填充
  useEffect(() => {
      const searchParams = location.state;
      if (searchParams) {
        const formattedSearchParams = { ...searchParams };
        
        // 处理 fuzzySearch 参数
        if (searchParams.fuzzy_importer !== undefined || searchParams.fuzzy_exporter !== undefined) {
          setFuzzySearch({
            importer: searchParams.fuzzy_importer || false,
            exporter: searchParams.fuzzy_exporter || false
          });
        }
        
        // 设置 AutoComplete 的值
        if (searchParams.importer) {
          setImporterValue(searchParams.importer);
        }
        if (searchParams.exporter) {
          setExporterValue(searchParams.exporter);
        }
        
        // 检查并转换日期范围
        if (formattedSearchParams.start_date && formattedSearchParams.end_date) {
          formattedSearchParams.date_range = [
            dayjs(formattedSearchParams.start_date),
            dayjs(formattedSearchParams.end_date)
          ];
          // 移除原始的 start_date 和 end_date 字段，因为 DatePicker 期望的是 date_range
          delete formattedSearchParams.start_date;
          delete formattedSearchParams.end_date;
        } else if (formattedSearchParams.start_date) {
          // 如果只有开始日期，也可以考虑单独处理或将其设为日期范围的开始
          formattedSearchParams.date_range = [dayjs(formattedSearchParams.start_date), null];
          delete formattedSearchParams.start_date;
        } else if (formattedSearchParams.end_date) {
          // 如果只有结束日期
          formattedSearchParams.date_range = [null, dayjs(formattedSearchParams.end_date)];
          delete formattedSearchParams.end_date;
        }
        
        // 移除 fuzzy 参数，因为它们不是表单字段
        delete formattedSearchParams.fuzzy_importer;
        delete formattedSearchParams.fuzzy_exporter;
        
        form.setFieldsValue(formattedSearchParams);
        // 如果有参数则自动触发搜索
        handleSearch(form.getFieldsValue());
      }
  }, [location.state, form]);

  
  const [pagination, setPagination] = useState({
    total: 0,
    total_pages: 0,
    current: 1,
    pageSize: 20,
    showSizeChanger: true,
    showTotal: (total) => `共 ${total} 条记录，共 ${Math.ceil(total / pagination.pageSize)} 页`
  });
  const [customsCodes, setCustomsCodes] = useState([]);

  // --- 核心修改：在 useEffect 中使用 setFieldsValue 清空所有字段 ---
  useEffect(() => {
    if (editModalVisible) { // 只有当 Modal 显示时才操作表单
      if (currentRecord) { // 编辑模式：填充数据
        const formattedRecord = {
          ...currentRecord,
          // 确保日期是 dayjs 对象
          日期: currentRecord.日期 ? dayjs(currentRecord.日期) : null,
          // 如果其他字段也是字符串但DatePicker/Select期望其他类型，也在此处转换
        };
        editForm.setFieldsValue(formattedRecord);
      } else { // 新增模式：使用 setFieldsValue 清空所有字段
        editForm.setFieldsValue({
          海关编码: undefined, // 或 null / ''
          编码产品描述: undefined,
          日期: undefined, // 对于 DatePicker，undefined 或 null 是清空值
          进口商: undefined,
          进口商所在国家: undefined,
          出口商: undefined,
          出口商所在国家: undefined,
          数量单位: undefined,
          数量: undefined,
          公吨: undefined,
          金额美元: undefined,
          详细产品名称: undefined,
          提单号: undefined,
          数据来源: undefined,
          关单号: undefined,
          // 确保这里包含了所有表单中的字段名
        });
      }
    }
  }, [editModalVisible, currentRecord, editForm]); // 依赖 editForm 以确保其稳定

  // 获取海关编码和国家列表
  useEffect(() => {
    const fetchOptions = async () => {
      try {
        setLoading(true);
        // 并行获取海关编码和国家列表
        const [codesResponse, countriesResponse] = await Promise.all([
          dataAPI.getCustomsCodes(),
          dataAPI.getCountries()
        ]);
        const customsCodes = codesResponse || [];
        setCustomsCodes(customsCodes);
        setCountries({
          import: countriesResponse?.import_countries || [],
          export: countriesResponse?.export_countries || []
        });
        
        // 获取海关编码的中文描述
        if (customsCodes.length > 0) {
          try {
            // 从6位海关编码中提取2位、4位前缀编码
            const allCodes = new Set();
            
            // 处理所有长度的海关编码
            customsCodes.forEach(code => {
              if (code && code.length > 0) {
                // 清理代码，确保只包含数字
                const cleanCode = code.toString().split(/[\s;]/)[0].replace(/[^0-9]/g, '');
                
                if (cleanCode.length > 0) {
                  // 对于超过10位的代码，只处理到10位
                  const maxLength = Math.min(cleanCode.length, 10);
                  
                  // 只生成标准长度的前缀：2位、4位、6位、8位、10位
                  const standardLengths = [2, 4, 6, 8, 10];
                
                  // 6位及以上的代码，只生成标准长度的前缀
                  standardLengths.forEach(length => {
                    if (maxLength >= length) {
                      allCodes.add(cleanCode.substring(0, length));
                    }
                  });
                }
              }
            });
            
            // 转换为数组并按字符串排序
            const sortedCodes = Array.from(allCodes).sort();
            
            // 批量获取所有编码的中文描述
            const descriptions = await dataAPI.getMultipleHSCodeDescriptions(sortedCodes);
            
            // 保存描述到状态中
            setHsCodeDescriptions(descriptions);
            
            // 创建选项数组，按排序后的顺序
            const options = sortedCodes.map(code => ({
              value: code,
              label: descriptions[code] ? `${code} - ${descriptions[code]}` : code
            }));
            setHsCodeOptions(options);
          } catch (error) {
            console.error('获取HSCode描述失败:', error);
            // 如果获取描述失败，只显示编码
            const options = customsCodes.map(code => ({
              value: code,
              label: code
            }));
            setHsCodeOptions(options);
          }
        }
      } catch (error) {
        console.error('获取选项数据失败:', error);
        message.error('获取选项数据失败，请刷新页面重试');
        // 设置默认值以防止错误
        setCustomsCodes([]);
        setCountries({ import: [], export: [] });
        setHsCodeOptions([]);
      } finally {
        setLoading(false);
      }
    };

    fetchOptions();
  }, []);

  // 处理进口商搜索建议
  const handleImporterSearch = async (value) => {
    if (value && value.length > 1) {
      try {
        const response = await dataAPI.getImportersSuggestions(value);
        setSuggestions(prev => ({ ...prev, importers: response || [] }));
      } catch (error) {
        console.error('获取进口商建议失败:', error);
        setSuggestions(prev => ({ ...prev, importers: [] }));
      }
    } else {
      setSuggestions(prev => ({ ...prev, importers: [] }));
    }
  };

  // 处理出口商搜索建议
  const handleExporterSearch = async (value) => {
    if (value && value.length > 1) {
      try {
        const response = await dataAPI.getExportersSuggestions(value);
        setSuggestions(prev => ({ ...prev, exporters: response || [] }));
      } catch (error) {
        console.error('获取出口商建议失败:', error);
        setSuggestions(prev => ({ ...prev, exporters: [] }));
      }
    } else {
      setSuggestions(prev => ({ ...prev, exporters: [] }));
    }
  };

  // 添加处理 AutoComplete 变化的函数
  const handleImporterChange = (value) => {
    setImporterValue(value);
    form.setFieldsValue({ importer: value });
  };

  const handleExporterChange = (value) => {
    setExporterValue(value);
    form.setFieldsValue({ exporter: value });
  };


  // 处理查询
  const handleSearch = async (values) => {
    try {
      setLoading(true);
      debugger
      // 格式化查询参数
      const params = {
        ...values,
        page: values.page ? values.page : pagination.current,
        page_size: values.page_size ? values.page_size : pagination.pageSize,
        // 日期范围格式化
        start_date: values.date_range?.[0]?.format('YYYY-MM-DD'),
        end_date: values.date_range?.[1]?.format('YYYY-MM-DD'),
        // 添加模糊查询参数
        fuzzy_importer: fuzzySearch.importer,
        fuzzy_exporter: fuzzySearch.exporter,
        // 移除date_range属性
        date_range: undefined
      };

      // 执行查询
      const response = await dataAPI.searchData(params);
      
      // 为数据添加物项名称字段
      const enrichedData = (response.data || []).map(item => ({
        ...item,
        key: item.id,
        物项名称: hsCodeDescriptions[item['海关编码']] || ''
      }));
      
      setDataSource(enrichedData);
      setPagination(prev => ({ ...prev, total: response.total, total_pages: response.total_pages}));
    } catch (error) {
      console.error('数据查询失败:', error);
      message.error('数据查询失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  // 处理表单提交（重置页码到第一页）
  const handleFormSubmit = async (values) => {
    // 重置分页到第一页
    setPagination(prev => ({ ...prev, current: 1 }));
    // 调用查询，强制设置page为1
    await handleSearch({ ...values, page: 1 });
  };

  // 处理重置
  const handleReset = () => {
    form.resetFields();
    // 重置 AutoComplete 的值
    setImporterValue('');
    setExporterValue('');
    // 重置模糊搜索状态为默认开启
    setFuzzySearch({
      importer: false,
      exporter: false
    });
    // 清空建议
    setSuggestions({
      importers: [],
      exporters: []
    });
  };

  // 处理单个删除
  const handleDelete = async (id) => {
    if (window.confirm('确定要删除这条记录吗？')) {
      try {
        setLoading(true);
        await dataAPI.delete(id);
        message.success('删除成功');
        handleSearch(form.getFieldsValue()); // 重新查询
      } catch (error) {
        message.error('删除失败，请重试');
      } finally {
        setLoading(false);
      }
    }
  };

  // 处理批量删除当前查询结果
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);

  const handleBulkDelete = () => {
    setShowDeleteConfirm(true);
  };

  const confirmDelete = async (deleteAll) => {
    try {
      setLoading(true);
      if (deleteAll) {
        // 删除所有符合当前搜索条件的记录
        const formValues = form.getFieldsValue();
        // 使用与搜索相同的参数格式化逻辑
        const params = {
          ...formValues,
          // 日期范围格式化
          start_date: formValues.date_range?.[0]?.format('YYYY-MM-DD'),
          end_date: formValues.date_range?.[1]?.format('YYYY-MM-DD'),
          // 添加模糊查询参数
          fuzzy_importer: fuzzySearch.importer,
          fuzzy_exporter: fuzzySearch.exporter,
          // 移除date_range属性
          date_range: undefined
        };
        
        await dataAPI.bulkDeleteByCondition(params);
        message.success('所有符合条件的记录已删除');
      } else {
        // 删除当前显示的记录
        const ids = dataSource.map(item => item.id);
        await dataAPI.bulkDelete(ids);
        message.success(`已删除当前显示的 ${dataSource.length} 条记录`);
      }
      handleSearch(form.getFieldsValue()); // 重新查询
    } catch (error) {
      message.error('批量删除失败，请重试');
    } finally {
      setLoading(false);
      setShowDeleteConfirm(false);
    }
  };

  // 处理编辑操作
  const handleEdit = (record) => {
    setCurrentRecord(record);
    // 关键修改：将日期字符串转换为 dayjs 对象
    const formattedRecord = {
      ...record,
      日期: record.日期 ? dayjs(record.日期) : null,
    };
    editForm.setFieldsValue(formattedRecord);
    setEditModalVisible(true);
  };

  // 处理保存编辑
  const handleSaveEdit = async () => {
    try {
      const values = await editForm.validateFields();
      setLoading(true);
      // 关键修改：将 dayjs 对象转换回 YYYY-MM-DD 字符串，以便发送给后端 API
      const formattedValues = {
          ...values,
          // 如果 values.日期 是 dayjs 对象，就用 format('YYYY-MM-DD') 转换
          // 否则，如果它已经是字符串（例如，在创建新记录时，如果 DatePicker 没有值），则保留原样
          日期: values.日期 ? dayjs(values.日期).format('YYYY-MM-DD') : null,
          // 确保其他可能需要格式化的字段也进行处理，例如金额、公吨等
          // 假设后端接受数字类型，确保这里发送的是数字
          数量: values.数量 ? parseFloat(values.数量) : null,
          公吨: values.公吨 ? parseFloat(values.公吨) : null,
          金额美元: values.金额美元 ? parseFloat(values.金额美元) : null,
        };
      if (currentRecord) {
        // 更新现有记录
        await dataAPI.update(currentRecord.id, formattedValues);
        message.success('更新成功');
      } else {
        // 创建新记录
        await dataAPI.create(formattedValues);
        message.success('创建成功');
      }
      setEditModalVisible(false);
      handleSearch({
        ...form.getFieldsValue(),
        page: pagination.current,
        page_size: pagination.pageSize,
      });
    } catch (error) {
      message.error(currentRecord ? '更新失败' : '创建失败');
    } finally {
      setLoading(false);
    }
  };

  // 处理导出功能
  const handleExport = async () => {
    try {
      setLoading(true);
      const values = form.getFieldsValue();
      // 构建导出参数，使用与搜索相同的参数格式化逻辑
      const exportParams = {
        ...values,
        // 日期范围格式化
        start_date: values.date_range?.[0]?.format('YYYY-MM-DD'),
        end_date: values.date_range?.[1]?.format('YYYY-MM-DD'),
        // 添加模糊查询参数
        fuzzy_importer: fuzzySearch.importer,
        fuzzy_exporter: fuzzySearch.exporter,
        // 移除date_range属性
        date_range: undefined,
        // 添加排序参数（导出时不需要分页参数）
        sort_by: sorter.field || '日期',
        sort_order: sorter.order === 'ascend' ? 'asc' : 'desc'
      };

      // 调用API导出数据
      const response = await dataAPI.export(exportParams);
      const jsonData = response.data;

      if (!jsonData || jsonData.length === 0) {
        throw Error('没有可导出的数据');
      }
      // --- 使用 xlsx 库将 JSON 转换为 Excel ---
      const ws = XLSX.utils.json_to_sheet(jsonData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '贸易数据'); // '贸易数据' 是工作表的名称

      // 生成 Excel 文件的二进制数据
      // type: 'array' 会返回一个 Uint8Array，这更适合创建 Blob
      const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });

      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `贸易数据_${dayjs().format('YYYYMMDD')}.xlsx`;
      a.click();
      URL.revokeObjectURL(url);
      message.success('数据导出成功');
    } catch (error) {
      console.error('数据导出失败:', error);
      message.error('数据导出失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  // 处理分页变化
  const handleTableChange = (paginations, filters, sorter) => {
    setPagination(prev => ({...prev, ...paginations}))
    setSorter(sorter);
    
    // 处理筛选器
    const filterParams = {};
    Object.keys(filters).forEach(key => {
      if (filters[key] && filters[key].length > 0) {
        filterParams[`filter_${key}`] = filters[key];
      }
    });
    
    // 获取当前表单值并重新查询
    form.validateFields().then(values => {
      handleSearch({
        ...values,
        ...filterParams,
        sort_by: sorter.field || '日期',
        sort_order: sorter.order === 'ascend' ? 'asc' : 'desc',
        page: paginations.current,
        page_size: paginations.pageSize
      });
    });
  };

  // 表格列定义
  const columns = [
    {
      title: '海关编码',
      dataIndex: '海关编码',
      key: '海关编码',
      sorter: true,
      width: 120,
      fixed: 'left',
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索海关编码"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['海关编码']?.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '物项名称',
      dataIndex: '物项名称',
      key: '物项名称',
      sorter: true,
      width: 180,
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索物项名称"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['物项名称']?.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '日期',
      dataIndex: '日期',
      key: '日期',
      sorter: true,
      width: 120,
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <RangePicker
            value={selectedKeys[0] ? [dayjs(selectedKeys[0][0]), dayjs(selectedKeys[0][1])] : []}
            onChange={dates => setSelectedKeys(dates ? [dates.map(d => d?.format('YYYY-MM-DD'))] : [])}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => {
        if (!value || !value[0] || !value[1]) return true;
        const recordDate = dayjs(record['日期']);
        return recordDate.isBetween(dayjs(value[0]), dayjs(value[1]), 'day', '[]');
      },
    },
    {
      title: '出口商',
      dataIndex: '出口商',
      key: '出口商',
      sorter: true,
      width: 150,
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索出口商"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['出口商']?.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '公吨',
      dataIndex: '公吨',
      key: '公吨',
      sorter: true,
      width: 100,
      render: (text) => {
        const num = Number(text);
        return isNaN(num) ? '' : num;
      },
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="最小值"
            value={selectedKeys[0]?.split('-')[0] || ''}
            onChange={e => {
              const max = selectedKeys[0]?.split('-')[1] || '';
              setSelectedKeys(e.target.value || max ? [`${e.target.value}-${max}`] : []);
            }}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Input
            placeholder="最大值"
            value={selectedKeys[0]?.split('-')[1] || ''}
            onChange={e => {
              const min = selectedKeys[0]?.split('-')[0] || '';
              setSelectedKeys(min || e.target.value ? [`${min}-${e.target.value}`] : []);
            }}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => {
        const [min, max] = value.split('-');
        const recordValue = parseFloat(record['公吨']);
        if (min && max) return recordValue >= parseFloat(min) && recordValue <= parseFloat(max);
        if (min) return recordValue >= parseFloat(min);
        if (max) return recordValue <= parseFloat(max);
        return true;
      },
    },
    {
      title: '数量',
      dataIndex: '数量',
      key: '数量',
      sorter: true,
      width: 100,
      render: (text) => {
        const num = Number(text);
        return isNaN(num) ? '' : num;
      },
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="最小值"
            value={selectedKeys[0]?.split('-')[0] || ''}
            onChange={e => {
              const max = selectedKeys[0]?.split('-')[1] || '';
              setSelectedKeys(e.target.value || max ? [`${e.target.value}-${max}`] : []);
            }}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Input
            placeholder="最大值"
            value={selectedKeys[0]?.split('-')[1] || ''}
            onChange={e => {
              const min = selectedKeys[0]?.split('-')[0] || '';
              setSelectedKeys(min || e.target.value ? [`${min}-${e.target.value}`] : []);
            }}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => {
        const [min, max] = value.split('-');
        const recordValue = parseFloat(record['数量']);
        if (min && max) return recordValue >= parseFloat(min) && recordValue <= parseFloat(max);
        if (min) return recordValue >= parseFloat(min);
        if (max) return recordValue <= parseFloat(max);
        return true;
      },
    },
    {
      title: '数量单位',
      dataIndex: '数量单位',
      key: '数量单位',
      sorter: true,
      width: 100,
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索数量单位"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['数量单位']?.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '出口国家',
      dataIndex: '出口商所在国家',
      key: '出口商所在国家',
      sorter: true,
      width: 120,
      filters: countries.export?.map(country => ({ text: country, value: country })) || [],
      onFilter: (value, record) => record['出口商所在国家'] === value,
    },
    {
      title: '进口商',
      dataIndex: '进口商',
      key: '进口商',
      sorter: true,
      width: 150,
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索进口商"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['进口商']?.toString().toLowerCase().includes(value.toLowerCase()),
    },  
    {
      title: '进口国家',
      dataIndex: '进口商所在国家',
      key: '进口商所在国家',
      sorter: true,
      width: 120,
      filters: countries.import?.map(country => ({ text: country, value: country })) || [],
      onFilter: (value, record) => record['进口商所在国家'] === value,
    },
    {
      title: '金额美元',
      dataIndex: '金额美元',
      key: '金额美元',
      sorter: true,
      width: 120,
      render: (text) => {
        const num = Number(text);
        return isNaN(num) ? '' : num;
      },
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="最小值"
            value={selectedKeys[0]?.split('-')[0] || ''}
            onChange={e => {
              const max = selectedKeys[0]?.split('-')[1] || '';
              setSelectedKeys(e.target.value || max ? [`${e.target.value}-${max}`] : []);
            }}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Input
            placeholder="最大值"
            value={selectedKeys[0]?.split('-')[1] || ''}
            onChange={e => {
              const min = selectedKeys[0]?.split('-')[0] || '';
              setSelectedKeys(min || e.target.value ? [`${min}-${e.target.value}`] : []);
            }}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => {
        const [min, max] = value.split('-');
        const recordValue = parseFloat(record['金额美元']);
        if (min && max) return recordValue >= parseFloat(min) && recordValue <= parseFloat(max);
        if (min) return recordValue >= parseFloat(min);
        if (max) return recordValue <= parseFloat(max);
        return true;
      },
    },
    {
      title: '编码产品描述',
      dataIndex: '编码产品描述',
      key: '编码产品描述',
      sorter: true,
      width: 180,
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索产品描述"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['编码产品描述']?.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '详细产品名称',
      dataIndex: '详细产品名称',
      key: '详细产品名称',
      sorter: true,
      width: 200,
      render: (text) => (
        <Tooltip 
          title={text} 
          placement="topLeft"
          overlayStyle={{ maxWidth: '400px', wordBreak: 'break-word' }}
        >
          <div className="product-name-cell">
            {text}
          </div>
        </Tooltip>
      ),
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索产品名称"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['详细产品名称']?.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '提单号',
      dataIndex: '提单号',
      key: '提单号',
      sorter: true,
      width: 150,
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索提单号"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['提单号']?.toString().toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '数据来源',
      dataIndex: '数据来源',
      key: '数据来源',
      sorter: true,
      width: 120,
      filters: [
        { text: '海关总署', value: '海关总署' },
        { text: '进出口数据', value: '进出口数据' },
        { text: '贸易统计', value: '贸易统计' },
        { text: '第三方数据', value: '第三方数据' },
      ],
      onFilter: (value, record) => record['数据来源'] === value,
    },
    {
      title: '关单号',
      dataIndex: '关单号',
      key: '关单号',
      sorter: true,
      width: 150,
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
        <div style={{ padding: 8 }}>
          <Input
            placeholder="搜索关单号"
            value={selectedKeys[0]}
            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
            onPressEnter={() => confirm()}
            style={{ marginBottom: 8, display: 'block' }}
          />
          <Space>
            <Button
              type="primary"
              onClick={() => confirm()}
              icon={<SearchOutlined />}
              size="small"
              style={{ width: 90 }}
            >
              搜索
            </Button>
            <Button onClick={() => clearFilters()} size="small" style={{ width: 90 }}>
              重置
            </Button>
          </Space>
        </div>
      ),
      filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
      onFilter: (value, record) => record['关单号']?.toString().toLowerCase().includes(value.toLowerCase()),
    },
    // 操作列，根据权限显示
    ...(hasPermission(PERMISSIONS.DATA_UPDATE) || hasPermission(PERMISSIONS.DATA_DELETE) ? [{
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          {hasPermission(PERMISSIONS.DATA_UPDATE) && (
            <Button type="primary" size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
              编辑
            </Button>
          )}
          {hasPermission(PERMISSIONS.DATA_DELETE) && (
            <Button danger size="small" icon={<DeleteOutlined />} onClick={() => handleDelete(record.id)}>
              删除
            </Button>
          )}
        </Space>
      ),
      width: 180,
      fixed: 'right',
    }] : [])
  ];

  return (
    <div className="data-query-page" style={{height: '100%', display: 'flex', flexDirection: 'column',margin: '0 20px'}}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
        <Title level={2}>星巡数据查询</Title>
        <Space size="middle">
          {/* 导出按钮 - 需要数据导出权限 */}
          {hasPermission(PERMISSIONS.DATA_EXPORT) && (
            <Button icon={<DownloadOutlined />} disabled={dataSource.length === 0} size="middle" onClick={handleExport}>
              导出
            </Button>
          )}
          {/* 新增数据按钮 - 需要数据创建权限 */}
          {hasPermission(PERMISSIONS.DATA_CREATE) && (
            <Button type="primary" onClick={() => { setCurrentRecord(null); editForm.resetFields(); editForm.setFieldsValue({日期: null,});setEditModalVisible(true); }}>
              新增数据
            </Button>
          )}
          {/* 批量删除按钮 - 需要数据删除权限 */}
          {hasPermission(PERMISSIONS.DATA_DELETE) && (
            <Button danger icon={<DeleteOutlined />} size="middle" onClick={handleBulkDelete} disabled={dataSource.length === 0}>
              批量删除当前结果
            </Button>
          )}
        </Space>
      </div>
      
      <div style={{ display:"flex", height:"0" ,flex:1}} >
        <div style={{height: "100%",flex:1,marginRight:16,maxWidth: "350px" }} >
          <div style={{background:"#fff",height:"100%",width:"100%",borderRadius:8,padding:16}}>
            <Form
              style={{height:"100%", overflowY:"auto", overflowX:"hidden"}}
              form={form}
              layout="vertical"
              onFinish={handleFormSubmit}
              initialValues={{ sort_by: '日期', sort_order: 'desc' }}
              className="query-form"
            >
              <Row gutter={[16, 0]}>
                <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                  <Form.Item name="customs_code" label="海关编码">
                      {/* <Select
                        mode="tags"
                        showSearch
                        allowClear
                        placeholder="选择或输入海关编码"
                        style={{ width: '100%' }}
                        filterOption={(input, option) =>
                          (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                        }
                        className="custom-select"
                        options={hsCodeOptions}
                        maxCount={1}  // 限制只能选择一个
                      /> */}
                    <Select
                      showSearch
                      allowClear
                      placeholder="选择海关编码"
                      style={{ width: '100%' }}
                      filterOption={(input, option) =>
                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                      }
                      className="custom-select"
                      options={hsCodeOptions}
                    />
                    {/* 用户可自行输入 */}
                    {/* <AutoComplete
                      allowClear
                      placeholder="选择或输入海关编码"
                      style={{ width: '100%' }}
                      filterOption={(inputValue, option) =>
                        (option?.label ?? '').toLowerCase().includes(inputValue.toLowerCase())
                      }
                      className="custom-select"
                      options={hsCodeOptions}
                    /> */}
                  </Form.Item>
                </Col>

                <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                  <Form.Item name="import_country" label="进口国家">
                    <Select
                      showSearch
                      allowClear
                      placeholder="选择进口国家"
                      style={{ width: '100%' }}
                      filterOption={(input, option) =>
                        (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
                      }
                    >
                      {(countries.import || []).map(country => (
                        <Option key={country} value={country}>{country}</Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>

                <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                  <Form.Item name="export_country" label="出口国家">
                    <Select
                      showSearch
                      allowClear
                      placeholder="选择出口国家"
                      style={{ width: '100%' }}
                      filterOption={(input, option) =>
                        (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
                      }
                    >
                      {(countries.export || []).map(country => (
                        <Option key={country} value={country}>{country}</Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>

                <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                  <Form.Item name="date_range" label="日期范围">
                    <RangePicker
                      format="YYYY-MM-DD"
                      style={{ width: '100%' }}
                      placeholder={['开始日期', '结束日期']}
                    />
                  </Form.Item>
                </Col>

                <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                  <Form.Item name="importer" label="进口商">
                    <div style={{ display: 'flex', gap: '8px' }}>
                      <AutoComplete
                        style={{ flex: 1 }}
                        placeholder="输入进口商名称"
                        onSearch={handleImporterSearch}
                        options={(suggestions.importers || []).map(item => ({ value: item }))}
                        allowClear
                        value={importerValue}
                        onChange={handleImporterChange}
                      />
                      <Button 
                        type={fuzzySearch.importer ? "primary" : "default"}
                        onClick={() => setFuzzySearch(prev => ({ ...prev, importer: !prev.importer }))}
                        size="middle"
                      >
                        模糊
                      </Button>
                    </div>
                  </Form.Item>
                </Col>

               <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                  <Form.Item name="exporter" label="出口商">
                    <div style={{ display: 'flex', gap: '8px' }}>
                      <AutoComplete
                        style={{ flex: 1 }}
                        placeholder="输入出口商名称"
                        onSearch={handleExporterSearch}
                        options={(suggestions.exporters || []).map(item => ({ value: item }))}
                        allowClear
                        value={exporterValue}
                        onChange={handleExporterChange}
                      />
                      <Button 
                        type={fuzzySearch.exporter ? "primary" : "default"}
                        onClick={() => setFuzzySearch(prev => ({ ...prev, exporter: !prev.exporter }))}
                        size="middle"
                      >
                        模糊
                      </Button>
                    </div>
                  </Form.Item>
                </Col>

                <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ textAlign: 'right' }}>
                  <Space size="middle">
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={loading} size="middle">
                      查询
                    </Button>
                    <Button icon={<ReloadOutlined />} onClick={handleReset} size="middle">
                      重置
                    </Button>
                  </Space>
                </Col>
              </Row>
            </Form>
          </div>
        </div>
        <div style={{height:"100%",flex:3,width:0}}>
          <div className="table-1" style={{background:"#fff",height:"100%",width:"100%",borderRadius:8,padding:16}}>
            <Spin style={{height:"100%"}} spinning={loading} tip="数据加载中...">
              <div 
                className="ad-body-table watermark-container" 
                style={{height:"100%"}}
                ref={tableContainerRef}
              >
                <Table
                  columns={columns}
                  dataSource={dataSource.map((item, index) => ({ ...item, key: index }))}
                  pagination={pagination}
                  onChange={handleTableChange}
                  size="middle"
                  bordered
                  scroll={{ x: 'max-content', y: 'calc(100% - 40px)' }}
                  style={{height:"100%"}}
                />
              </div> 
            </Spin>
          </div>
        </div>
      </div>

      {/* 编辑/新增数据模态框 - 根据权限显示 */}
      {(hasPermission(PERMISSIONS.DATA_CREATE) || hasPermission(PERMISSIONS.DATA_UPDATE)) && (
        <Modal
          title={currentRecord ? "编辑数据" : "新增数据"}
          open={editModalVisible}
          onCancel={() => setEditModalVisible(false)}
          footer={[
            <Button key="cancel" onClick={() => setEditModalVisible(false)}>取消</Button>,
            <Button key="save" type="primary" loading={loading} onClick={handleSaveEdit}>保存</Button>
          ]}
          destroyOnClose
          width={800}
        >
        <Form form={editForm} layout="vertical" initialValues={currentRecord || {}}>
          <Form.Item name="海关编码" label="海关编码" rules={[{ required: true, message: '请输入海关编码' }]}>
            <Input placeholder="请输入海关编码" />
          </Form.Item>
          <Form.Item name="编码产品描述" label="编码产品描述" rules={[{message: '请输入编码产品描述' }]}>
            <Input placeholder="请输入编码产品描述" />
          </Form.Item>
          <Form.Item name="日期" label="日期" rules={[{ required: true, message: '请选择日期' }]}>
            <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="进口商" label="进口商" rules={[{ required: true, message: '请输入进口商' }]}>
            <Input placeholder="请输入进口商" />
          </Form.Item>
          <Form.Item name="进口商所在国家" label="进口国家" rules={[{ required: true, message: '请选择进口国家' }]}>
            <Select placeholder="请选择进口国家">
              {(countries.import || []).map(country => (
                <Option key={country} value={country}>{country}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="出口商" label="出口商" rules={[{ required: true, message: '请输入出口商' }]}>
            <Input placeholder="请输入出口商" />
          </Form.Item>
          <Form.Item name="出口商所在国家" label="出口国家" rules={[{ required: true, message: '请选择出口国家' }]}>
            <Select placeholder="请选择出口国家">
              {(countries.export || []).map(country => (
                <Option key={country} value={country}>{country}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item name="数量单位" label="数量单位" rules={[{ required: true, message: '请输入数量单位' }]}>
            <Input placeholder="请输入数量单位" />
          </Form.Item>
          <Form.Item name="数量" label="数量" rules={[{ required: true, message: '请输入数量' }]}>
            <Input type="number" placeholder="请输入数量" />
          </Form.Item>
          <Form.Item name="公吨" label="公吨">
            <Input type="number" placeholder="请输入公吨" />
          </Form.Item>
          <Form.Item name="金额美元" label="金额美元" rules={[{ required: true, message: '请输入金额美元' }]}>
            <Input type="number" placeholder="请输入金额美元" />
          </Form.Item>
          <Form.Item name="详细产品名称" label="详细产品名称" rules={[{message: '请输入详细产品名称' }]}>
            <Input placeholder="请输入详细产品名称" />
          </Form.Item>
          <Form.Item name="提单号" label="提单号" rules={[{message: '请输入提单号' }]}>
            <Input placeholder="请输入提单号" />
          </Form.Item>
          <Form.Item name="数据来源" label="数据来源" rules={[{ message: '请输入数据来源' }]}>
            <Input placeholder="请输入数据来源" />
          </Form.Item>
          <Form.Item name="关单号" label="关单号" rules={[{ message: '请输入关单号' }]}>
            <Input placeholder="请输入关单号" />
          </Form.Item>
        </Form>
      </Modal>
    )}

      {/* 批量删除确认对话框 - 根据权限显示 */}
      {hasPermission(PERMISSIONS.DATA_DELETE) && (
        <Modal
          title="确认删除"
          open={showDeleteConfirm}
          onCancel={() => setShowDeleteConfirm(false)}
          footer={[
            <Button key="cancel" onClick={() => setShowDeleteConfirm(false)}>取消</Button>,
            <Button key="current" type="primary" danger loading={loading} onClick={() => confirmDelete(false)}>
              删除当前显示的 {dataSource.length} 条记录
            </Button>,
            <Button key="all" type="primary" danger loading={loading} onClick={() => confirmDelete(true)}>
              删除所有符合条件的记录
            </Button>
          ]}
        >
          <p>请选择删除范围：</p>
          <p>• <strong>删除当前显示的记录</strong>：仅删除当前页面显示的 {dataSource.length} 条记录</p>
          <p>• <strong>删除所有符合条件的记录</strong>：删除所有符合当前搜索条件的记录（可能包含多页数据）</p>
          <p style={{color: 'red', fontWeight: 'bold'}}>⚠️ 此操作不可撤销，请谨慎选择！</p>
        </Modal>
      )}
    </div>
  );
};

export default DataQuery;